<!--
* Created by Sean on 2017/11/9.
* Renew Order Detail 续租详情
-->
<template>
  <div id="renewOrder" class="renew-order actWrap">
    <group title="续租" class="order-group">
      <x-input :show-clear="false"title="租金" v-model="zuMoney" text-align="right"></x-input>
      <x-input :show-clear="false"title="押金" v-model="yaMoney" text-align="right"></x-input>
      <cell title="物业费" :value="(orderInfo.strataFee || 0) + '元'"></cell>
      <!--<cell title="服务费" :value="orderInfo.serviceCharge || 0"></cell>-->
      <cell title="起租时间" :value="beginTime"></cell>
      <cell title="续租至" :value="endTime"></cell>
    </group>
    <group title="当前" class="order-group order-group-last">
      <cell title="租金" :value="(orderInfo.oldMoney || 0) + '元'"></cell>
      <cell title="押金" :value="(orderInfo.oldDMoney || 0) + '元'"></cell>
      <div class="cell-item">
        <cell title="物业费" :value="(orderInfo.oldStrataFee || 0) + '元'"></cell>
        <!--<cell title="服务费" :value="orderInfo.serviceCharge || 0 + '元'"></cell>-->
      </div>
      <cell title="合约到期" :value="contractTime"></cell>
    </group>
    <div class="btn-wrapper">
      <x-button class="btn-refuse" type="plain" @click.native="showConfirm = true">拒绝续租</x-button>
      <x-button type="primary" @click.native="agree">同意续租</x-button>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showConfirm" class="confirm-renew-order-refuse" @on-confirm="refuseOrder" @on-cancel="showConfirm = false">
        <p>您确定拒绝与该租客续租吗？</p>
        <div class="btn-close" @click="showConfirm = false"></div>
      </confirm>
    </div>
  </div>
</template>
<script>
  import {Group, Cell, Datetime, Confirm, TransferDomDirective as TransferDom} from 'vux'
  export default {
    name: 'renewOrder',
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      Datetime,
      Confirm
    },
    data () {
      return {
        zuMoney: 0,
        yaMoney: 0,
        beginTime: '',
        endTime: '',
        contractTime: '',
        orderInfo: {},
        showConfirm: false
      }
    },
    created () {
      this.orderId = this.$route.params.orderId
      this.getData()
    },
    methods: {
      getData () {
        this.$axiosPosting(this.$api.queryOrderDetail4Relet, {
          orderId: this.orderId
        }).then(json => {
          if (json.code === '0000') {
            this.orderInfo = json.data
            let beginTime = this.orderInfo && this.orderInfo.beginTime
            let endTime = this.orderInfo && this.orderInfo.endTime
            let contractTime = this.orderInfo && this.orderInfo.contractTime
            this.zuMoney = this.orderInfo && this.orderInfo.money
            this.yaMoney = this.orderInfo && this.orderInfo.dMoney
            this.beginTime = beginTime ? (new Date(beginTime.replace(/-/g, '/'))).Format('yyyy-MM-dd') : ''
            this.endTime = endTime ? (new Date(endTime.replace(/-/g, '/'))).Format('yyyy-MM-dd') : ''
            this.contractTime = contractTime ? (new Date(contractTime.replace(/-/g, '/'))).Format('yyyy-MM-dd') : ''
          }
        })
      },
      // 同意续租
      agree () {
        // 租金校验
        if (+this.zuMoney === 0) {
          this.$vux.toast.text('租金不能为空')
          return false
        }
        if ((+this.zuMoney).toString() === 'NaN') {
          this.$vux.toast.text('请输入正确的租金金额')
          return false
        }
        // 押金校验
        if (+this.yaMoney === 0) {
          this.$vux.toast.text('押金不能为空')
          return false
        }
        if ((+this.yaMoney).toString() === 'NaN') {
          this.$vux.toast.text('请输入正确的押金金额')
          return false
        }
        this.$axiosPosting(this.$api.reletContract, {
          orderId: this.orderId,
          money: this.zuMoney, // 租金
          dMoney: this.yaMoney // 押金
        }).then(json => {
          if (json.code === '0000') {
            // this.$vux.toast.text('续租成功', 'middle')
            window.location.href = json.data.signUrl
          }
        })
      },
      // 拒绝续租
      refuseOrder () {
        this.showConfirm = false
        this.$axiosPosting(this.$api.cancelOrder, {
          orderId: this.orderId
        }).then(json => {
          if (json.code === '0000') {
            this.$vux.toast.text('拒绝续租成功', 'middle')
            this.$router.go(-1)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .renew-order {
    background: #f4f4f4;
    .order-group {
      margin-bottom: 6px;
      background: #fff;
      .weui-cells__title {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #000;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          display: block;
          width: 4px;
          height: 16px;
          margin-top: -8px;
          background: #ff9600;
        }
      }
      .vux-x-input:after {
        content: '元';
        position: relative;
        display: inline-block;
        margin-left: 4px;
        font-size: 15px;
        line-height: .8;
        color: #777;
      }
    }
    .order-group-last {
      padding-bottom: 44px;
    }
    .weui-cells {
      &:before {
        display: none;
      }
      .weui-cell {
        .vux-label,
        .weui-label,
        .weui-cell__ft {
          font-size: 15px;
        }
        .weui-cell__ft {
          color: #777;
        }
        .vux-label-desc {
          font-size: 12px;
          color: #4e4e4e;
        }
      }
      .cell-item {
        display: flex;
        .weui-cell {
          flex: 1 1 auto;
        }
        .weui-cell:first-child:before {
          display: block;
        }
        /*.weui-cell:last-child {*/
          /*padding-left: 0;*/
        /*}*/
      }
    }
    .btn-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: flex;
      .weui-btn {
        margin-top: 0;
        border-radius: 0;
      }
      .btn-refuse {
        color: #ff9600;
        background: #fff;
        &:after {
          background: transparent;
        }
      }
    }
  }
  .confirm-renew-order-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .weui-dialog__bd {
      font-size: 17px;
      color: #000;
    }
    .weui-dialog__btn_default {
      color: #ff9600;
      background: #fff !important;
      border-top: 1px solid #f4f4f4;
    }
    .btn-close {
      position: absolute;
      left: 50%;
      bottom: -60px;
      width: 36px;
      height: 36px;
      margin-left: -18px;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
